<template>
  <div ref="specContainer" class="specContainer"></div>
</template>

<script>
import chart from '@/utils/chart.js'
export default {
  name: 'SpecView',
  props: {
    showTitle: {
      type: Boolean,
      required: false,
      default: false
    },
    showAxisXUnits: {
      type: Boolean,
      required: false,
      default: false
    },
    showAxisYUnits: {
      type: Boolean,
      required: false,
      default: true
    },
    drawCenterLine: {
      type: Boolean,
      required: false,
      default: true
    },
    xAxisMarkNum: {
      type: Number,
      required: false,
      default: 10
    },
    yAxisMarkNum: {
      type: Number,
      required: false,
      default: 5
    },
    yAxisPadding: {
      type: Number,
      required: false,
      default: 75
    },
    mouseMove: {
      type: Function,
      required: false,
      default: () => {}
    },
    mouseLeave: {
      type: Function,
      required: false,
      default: () => {}
    },
    mouseClick: {
      type: Function,
      required: false,
      default: () => {}
    },
    xIntervalChange: {
      type: Function,
      required: false,
      default: () => {}
    }
  },
  data () {
    return {
      chart: null,
      // 曲线对象 => 对应一条折线
      line: null,
      line2: null,
      line3: null,
      initStart: 950,
      initEnd: 2150,
      xAxisMin: 950,
      xAxisMax: 2150
    }
  },
  mounted () {
    this.chart = chart().lineChart({
      container: this.$refs.specContainer, // id
      drawCenterLine: this.drawCenterLine,
      background: {
        r: 0 / 255,
        g: 0 / 255,
        b: 0 / 255
      }
    })
    // 设置折线图坐标基本样式和配置
    this.series = this.chart.addSeries({
      title: this.showTitle
        ? {
            text: '频谱图',
            left: this.$refs.specContainer.clientWidth / 2,
            top: 10
          }
        : null,
      // x轴单位
      axisXUnits: this.showAxisXUnits
        ? {
            text: '频率/MHz',
            left: this.$refs.specContainer.clientWidth / 2,
            top: this.$refs.specContainer.clientHeight
          }
        : null,
      // y轴单位
      axisYUnits: this.showAxisYUnits
        ? {
            text: '强度/dBm',
            left: 10,
            top: this.$refs.specContainer.clientHeight / 2
          }
        : null,
      // x轴标点数量
      xAxisMarkNum: this.xAxisMarkNum,
      // y轴标点数量
      yAxisMarkNum: this.yAxisMarkNum,
      // y轴左边距
      // yAxisPadding: this.showAxisYUnits ? 75 : 35,
      yAxisPadding: this.yAxisPadding,
      // y轴右边距
      yAxisAnotherPadding: 20,
      // x轴下边距
      xAxisPadding: 30,
      // x轴上边距
      xAxisAnotherPadding: this.showTitle ? 30 : 30,
      // x轴坐标格式化
      xAxisMarkFormatter: (value) => {
        return Number(value / 1000).toFixed(3)
      },
      // y轴坐标格式化
      yAxisMarkFormatter: (value) => {
        return Number(value).toFixed(0)
      },
      // 坐标轴颜色
      axisColor: {
        r: 25 / 255,
        g: 190 / 255,
        b: 5 / 255
      }
      // x轴最小刻度
      // minXInterval: 200,
    })
    // 设置频谱图默认Y轴区间
    this.series.setMaxYInterval([-110, -10])

    /* 频谱图绑定事件 */
    // 给折线图添加鼠标移动事件
    this.series.setOnMouseMoveListener(this.mouseMove)

    // 给折线图添加鼠标移出频谱事件
    this.series.setOnMouseLeaveListener(this.mouseLeave)
    // 给折线图添加点击事件
    this.series.setOnClickListener(this.mouseClick)

    // 给图表添加被测量事件(画矩形事件) => 传入的回调即是绑定的事件
    this.series.setOnMeasureListener((startX, startY, endX, endY) => {
      // console.log('绘制的矩形坐标：',startX, startY, endX, endY)
    })

    // 设置折线图X轴区间变化时的回调函数 => 变化时瀑布图x轴区间跟着变化同时刷新图表
    this.series.setOnXIntervalChange(this.xIntervalChange)

    // 设置折线图绘图曲线颜色 => 用line变量来接收addLine函数的返回结果，后续调用line上的方法来添加数据
    // 平均曲线
    this.line = this.series.addLine({
      color: {
        r: 25 / 255,
        g: 190 / 255,
        b: 5 / 255
      }
    })

    // 最大曲线
    this.line2 = this.series.addLine({
      color: {
        r: 197 / 255,
        g: 0 / 255,
        b: 0 / 255
      }
    })

    // 最小曲线
    this.line3 = this.series.addLine({
      color: {
        r: 39 / 255,
        g: 129 / 255,
        b: 223 / 255
      }
    })
    this.chart.refresh()
  },
  methods: {
    // 数据量小的频谱图绘制逻辑
    drawChart (data, startFreq, endFreq, initStart, initEnd) {
      // console.log('起止范围', startFreq, endFreq, initStart, initEnd)
      if (!data || !data.length) return
      if (this.initStart !== initStart || this.initEnd !== initEnd) {
        this.initStart = initStart
        this.initEnd = initEnd
        // 重新设置折线图x轴最大区间
        this.changeMaxInterval()
        // 重新设置折线图x轴当前区间
        this.changeInterval()
      }
      if (this.xAxisMax !== endFreq || this.xAxisMin !== startFreq) {
        this.xAxisMin = startFreq
        this.xAxisMax = endFreq
        // 重新设置折线图x轴当前区间
        this.changeInterval()
      }

      /* // 自适应Y轴
      const maxYVal = Math.max.apply(null, data)
      const minYVal = Math.min.apply(null, data)

      maxYVal &&
        minYVal &&
        this.series.changeYInterval([
          minYVal - (maxYVal - minYVal) * 0.1,
          maxYVal + (maxYVal - minYVal) * 0.1
        ]) */

      // 图表实际的x、y数据
      const temArr = [] // 平均曲线
      const increase = (initEnd - initStart) / data.length
      data.forEach((item, index) => {
        // 填入频谱图数据
        temArr.push(initStart + index * increase)
        temArr.push(data[index])
      })
      this.line.setData(temArr)
      this.chart.refresh()
    },
    // 设置折线X轴当前区间
    changeInterval () {
      this.series.changeXInterval([this.xAxisMin, this.xAxisMax])
    },
    // 设置折线X轴最大区间
    changeMaxInterval () {
      if (this.initStart !== null) {
        this.series.setMaxXInterval([this.initStart, this.initEnd])
      } else {
        this.series.setMaxXInterval([this.xAxisMin, this.xAxisMax])
      }
    },
    // 清空图谱
    clearChart () {
      this.line.setData([])
      this.chart.refresh()
    }
  }
}
</script>

<style>
.specContainer {
  width: 100%;
  height: 100%;
}
</style>
